<template>
  <div>
    <Header></Header>
    <Search :cities="cities"></Search>
    <city-list :hotCities="hotCities" :cities="cities"></city-list>
    <Alphabet :alphabetList="alphabetList"></Alphabet>
  </div>
</template>

<script>
import axios from "axios";
import Header from "./components/Header.vue";
import Search from "./components/Search.vue";
import CityList from "./components/List.vue";
import Alphabet from "./components/Alphabet.vue";
export default {
  name: "City",
  components: { Header, Search, CityList, Alphabet },
  data() {
    return {
      hotCities:[],  // 热门城市
      alphabetList:[],  // 城市首字母列表
      cities:{},  // 城市列表  
    };
  },
  methods: {
    getCityInfo() {
      axios
        .get("/api/city.json")
        .then(this.getCityInfoSucc)
        .catch(err => {
          console.log(err.message);
        });
    },
    getCityInfoSucc(res) {
      const info = res.data.data;
      this.hotCities = info.hotCities;  
      this.cities = info.cities;
      this.alphabetList = Object.keys(info.cities);
    }
  },

  mounted() {
    this.getCityInfo();
  }
};
</script>

<style lang="less" scoped></style>
